<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <%@ include file="style.jsp" %>
    <script src="${pageContext.request.contextPath}/shop/client/js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <style>
        .layui-menu > li {
            padding-left: 40px;
        }
    </style>
</head>

<body>
<%@ include file="start.jsp" %>
<!--  导航 end -->
<%@ include file="header.jsp" %>
<!--  header end -->
<div class="submena clearfix">
        <span class="layui-breadcrumb" lay-separator=">">
            <a href="${pageContext.request.contextPath}/shop/client">首页</a>
            <a href="${pageContext.request.contextPath}/shop/client/mine.jsp">我的账户</a>
            <a><cite>订单查询</cite></a>
        </span>
</div>
<div class="w grid" style="margin-bottom: 50px;display: flex;background-color: #fff;">
    <div class="layui-card" style="width: 350px;">
        <div class="layui-card-header" style="padding: 10px;">
            <h2>我的账户</h2>
        </div>
        <div class="layui-cart-body">
            <ul class="layui-menu" id="mineMenu">
                <li lay-options="{layout: 'mine'}">
                    <div class="layui-menu-body-title">信息修改</div>
                </li>
                <li class="layui-menu-item-divider"></li>
                <li class="layui-menu-item-checked" lay-options="{layout: 'order'}">
                    <div class="layui-menu-body-title">订单查询</div>
                </li>
                <li class="layui-menu-item-divider"></li>
                <li>
                    <div id="exit" class="layui-menu-body-title">用户退出</div>
                    <script>
                        $('#exit').click(function (){
                            window.location.href='${pageContext.request.contextPath}/shop/client/loginOut';
                        })
                    </script>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-card panel" id="mine" style="display: none">
        <div class="layui-card-header" style="padding: 10px;">
            <h2>我的信息</h2>
        </div>
        <div class="layui-card-body">
            <form class="layui-form" action="${pageContext.request.contextPath}/shop/client/uploadUser" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" required  lay-verify="required"  autocomplete="off" class="layui-input"  value="${user.username}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="PASSWORD" required  lay-verify="required"  autocomplete="off" class="layui-input"  value="${user.PASSWORD}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="telephone" required lay-verify="required"  autocomplete="off" class="layui-input" value="${user.telephone}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" required lay-verify="required"  autocomplete="off" class="layui-input" value="${user.email}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="gender" value="男" title="男" ${user.gender == '男'?'checked':''}>
                        <input type="radio" name="gender" value="女" title="女" ${user.gender == '女'?'checked':''}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">个人简介</label>
                    <div class="layui-input-inline">
                        <input type="text" name="introduce" required lay-verify="required"  autocomplete="off" class="layui-input" value="${user.introduce}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card panel" id="order">
        <div class="layui-card-header" style="padding: 10px;">
            <h2>我的订单</h2>
        </div>
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>收件人</th>
                    <th>订单时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${orderList}" var="item">
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.receiverName}</td>
                        <td>${item.ordertime}</td>
                        <td>
                            <c:set var="wei" value="<span class=\"layui-badge layui-bg-red\">未支付</span>"/>
                            <c:set var="yi" value="<span class=\"layui-badge layui-bg-green\">已支付</span>"/>
                                ${item.paystate == 1? yi:wei}
                        </td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon layui-icon-delete"></i>
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

</div>
<%@include file="footer.jsp" %>
<script>
    layui.use('dropdown', function () {
        var dropdown = layui.dropdown;

        //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
        dropdown.on('click(mineMenu)', function (options) {
            var othis = $(this); //当前菜单列表的 DOM 对象
            var str = '#' + options.layout;
            $(str).show();
            $(str).siblings(".panel").hide();
        });
    });
</script>
</body>

</html>